<template>
    <div class="app-container">
        <!--        <el-row  :gutter="20" style="margin-top: 10px;font-size: 15px"-->
        <!--                type="flex" justify="space-around">-->
        <!--            <el-col :xl="24">-->
        <!--                <el-card shadow="always">-->
        <!--                    <div slot="header" class="clearfix">-->
        <!--                        <span style="font-size: 14px;color: #abb2bf">施肥机信息</span>-->
        <!--                    </div>-->
        <!--                </el-card>-->
        <!--            </el-col>-->
        <!--        </el-row>-->

        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="施肥机">
                <el-select v-model="moduleId"
                           size="small"
                           placeholder="请选择施肥机"
                           @change="changeFertilizer"
                           clearable
                >
                    <el-option
                        v-for="item in fertilizerListSelect"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-row :gutter="20" style="margin-top: 10px;font-size: 15px" v-show="list.length>0">
            <el-col :xs="24" :span="12" v-loading="globalLoading" v-for="(item,index) in list" :key="index"
                    style="margin-top: 10px" v-show="item.isShowList"
            >
                <el-card shadow="always" v-loading="item.loading" :element-loading-text="item.text">
                    <div slot="header" style="height: 30px">
                        <span style="font-size: 14px;color: #abb2bf">{{ item.name }}</span>
                        <div style="float: right; padding: 3px 0" v-show="item.isShowOpenStop">
                            <span style="font-size: 14px;color: #abb2bf">运行启动：</span>
                            <el-switch
                                v-model="item.openStopObj.switchOpenStopValue"
                                active-color="#13ce66"
                                active-value="1"
                                inactive-value="0"
                                @change="handleOpenStopStatus(index, item.openStopObj.switchOpenStopValue)"
                            >
                            </el-switch>
                        </div>
                        <div style="float: right;margin-right: 5px" v-show="item.isShowCurentOpenStop">
                            <el-tag type="success" v-show="item.curentOpenStopObj.addressValue==='1'">运行中</el-tag>
                            <el-tag type="info" v-show="item.curentOpenStopObj.addressValue==='0'">已停止</el-tag>
                        </div>
                    </div>
                    <div style="text-align: center;display: flex;justify-content: space-around;color: #878787">
                        <div v-show="item.isShowSpeed">
                            <div class="addressValueClass">
                                {{ item.speedObj.addressValue }}L/h
                            </div>
                            <div style="margin-top: 10px">加肥速度</div>
                        </div>
                            <div v-show="item.isShowFertilizerOperation">
                            <div class="addressValueClass">{{ item.fertilizerOperationObj.addressValue }}L</div>
                            <div style="margin-top: 10px">目标加肥量</div>
                        </div>
                        <div v-show="item.isShowStir">
                            <div class="addressValueClass">{{
                                    item.stirObj.addressValue === '0' ? '关闭' : '开启'
                                }}
                            </div>
                            <div style="margin-top: 10px">搅拌</div>
                        </div>
                        <div v-show="item.isShowFertilizerAdd">
                            <div class="addressValueClass">
                                {{ item.fertilizerAddObj.addressValue === '0' ? '关闭' : '开启' }}
                            </div>
                            <div style="margin-top: 10px">加肥阀</div>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div style="height: 80px">
                        <div>
                            <el-form label-position="left" label-width="100">
                                <el-form-item label="加肥速度" v-show="item.isShowSpeed">
                                    <div style="display: flex">
                                        <el-input clearable v-model="item.speedObj.addressValue" placeholder="输入数值"
                                        ></el-input>
                                        <el-button style="margin-left: 5px"
                                                   type="success"
                                                   size="small" @click="handleOperation(index, '0','speed')"
                                        >读取
                                        </el-button>
                                        <el-button style="margin-left: 5px"
                                                   type="success"
                                                   size="small" @click="handleOperation(index, '1','speed')"
                                        >设置
                                        </el-button>
                                    </div>
                                </el-form-item>
                                <el-form-item label="运行加肥量" v-show="item.isShowFertilizerOperation">
                                    <div style="display: flex">
                                        <el-input clearable v-model="item.fertilizerOperationObj.addressValue"
                                                  placeholder="输入数值"
                                        ></el-input>
                                        <el-button style="margin-left: 5px"
                                                   type="success"
                                                   size="small"
                                                   @click="handleOperation(index, '0','fertilizerOperation')"
                                        >读取
                                        </el-button>
                                        <el-button style="margin-left: 5px"
                                                   type="success"
                                                   size="small"
                                                   @click="handleOperation(index, '1','fertilizerOperation')"
                                        >设置
                                        </el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <el-row :gutter="20">
                        <el-col :span="8" :xs="12" v-show="item.isShowStir">
                            <div style="display: flex;color: #878787">
                                <div>搅拌电机：</div>
                                <el-switch
                                    v-model="item.stirObj.switchMixerMachineValue"
                                    active-color="#13ce66"
                                    active-value="1"
                                    inactive-value="0"
                                    @change="handleMixerMachineStatus(index, item.stirObj.switchMixerMachineValue)"
                                >
                                </el-switch>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="12" v-show="item.isShowFertilizerAdd">
                            <div style="display: flex;color: #878787">
                                <div>加肥阀：</div>
                                <el-switch
                                    v-model="item.fertilizerAddObj.switchFertilizerAddValue"
                                    active-color="#13ce66"
                                    active-value="1"
                                    inactive-value="0"
                                    @change="handleFertilizerAddStatus(index, item.fertilizerAddObj.switchFertilizerAddValue)"
                                >
                                </el-switch>
                            </div>
                        </el-col>
                        <!--                        <el-col :span="8">-->
                        <!--                            <div style="display: flex;color: #878787">-->
                        <!--                                <div>搅拌电机：</div>-->
                        <!--                                <el-switch-->
                        <!--                                    v-model="item.stirObj.switchValue"-->
                        <!--                                    active-color="#13ce66"-->
                        <!--                                    active-value="1"-->
                        <!--                                    inactive-value="0"-->
                        <!--                                    @change="handleMixerMachineStatus(index, item.stirObj.switchValue)"-->
                        <!--                                >-->
                        <!--                                </el-switch>-->
                        <!--                            </div>-->
                        <!--                        </el-col>-->
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row v-loading="globalLoading" v-show="list.length===0">
            <el-col :span="24">
                <el-empty description="暂无数据"></el-empty>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    getFertilizerDistributorV1,
    listFertilizerDistributorV1Monitor,
    listFertilizerDistributorV1Select
} from '@/api/module/fertilizerDistributorV1'
import { sendMessage } from '@/api/netty/nettyMessage'

export default {
    name: 'index',
    data() {
        return {
            value: '',
            list: [],
            queryParams: {
                id: null
            },
            // 根据网关查询施肥机
            gatewayObj: {
                gatewayId: null
            },
            globalLoading: false,
            webClientId: this.genUUID(10, 16),
            messageObj: {
                instruction: '10',
                paramType: '0'
            },
            fertilizerListSelect: [],
            addressName: ['启停标志', '加肥速度', '目标加肥量', '搅拌', '加肥阀'],
            moduleId: null,
            moduleInfo: {}
        }
    },
    created() {
        const moduleId = this.$route.params && this.$route.params.moduleId
        if (moduleId) {
            this.queryParams.id = moduleId
            this.getModuleInfo()
            this.getList()
        }
        this.fertilizerSelect()
    },
    destroyed() {
        if (this.ws !== undefined) {
            this.ws.close()
            // 离开页面清空倒计时
            this.list.forEach(i => {
                console.log(i)
                i.stirObj.overTime = false
                i.fertilizerAddObj.overTime = false
                i.openStopObj.overTime = false
                if (i.stirObj.timer !== null) {
                    clearInterval(i.stirObj.timer)
                }
                if (i.fertilizerAddObj.timer !== null) {
                    clearInterval(i.fertilizerAddObj.timer)
                }
                if (i.openStopObj.timer !== null) {
                    clearInterval(i.openStopObj.timer)
                }
                if (i.speedObj.timer !== null) {
                    clearInterval(i.speedObj.timer)
                }
                if (i.fertilizerOperationObj.timer !== null) {
                    clearInterval(i.fertilizerOperationObj.timer)
                }
            })
        }
    },
    methods: {
        getModuleInfo() {
            getFertilizerDistributorV1(this.queryParams.id).then(response => {
                this.moduleInfo = response.data
            })
        },
        // 选择施肥机
        fertilizerSelect() {
            listFertilizerDistributorV1Select().then(res => {
                console.log(res)
                this.fertilizerListSelect = res.data
            })
        },
        getList() {
            this.globalLoading = true
            this.list = []
            listFertilizerDistributorV1Monitor(this.queryParams).then(response => {
                this.list = response.data
                console.log(this.list)
                this.list.forEach((item, index) => {
                    item.loading = false
                    item.text = ''
                    item.isShowList = true
                    if (item.addressList === null) {
                        item.isShowList = false
                    }
                    item.openStopObj = {
                        addressValue: '0',
                        switchOpenStopValue: '0'
                    }
                    item.curentOpenStopObj = {
                        addressValue: '0',
                    }
                    console.log('item.openStopObj', item.openStopObj)
                    item.speedObj = {
                        addressValue: '0'
                    }
                    item.fertilizerOperationObj = {
                        addressValue: '0'
                    }
                    item.stirObj = {
                        addressValue: '0',
                        switchMixerMachineValue: '0'
                    }
                    item.fertilizerAddObj = {
                        addressValue: '0',
                        switchFertilizerAddValue: '0'
                    }
                    // 如果有地址列表，则遍历地址列表，判断是否显示
                    if (item.addressList !== null) {
                        item.isShowCurentOpenStop = item.addressList.some(k => k.addressName === '本次运行标志')
                        item.isShowOpenStop = item.addressList.some(k => k.addressName === '启停标志')
                        item.isShowSpeed = item.addressList.some(k => k.addressName === '加肥速度')
                        item.isShowFertilizerOperation = item.addressList.some(k => k.addressName === '目标加肥量')
                        item.isShowStir = item.addressList.some(k => k.addressName === '搅拌')
                        item.isShowFertilizerAdd = item.addressList.some(k => k.addressName === '加肥阀')
                        item.addressList.forEach(i => {
                            if (i.addressName === '加肥速度') {
                                if (i.addressValue === null || i.addressValue === '') {
                                    i.addressValue = '0'
                                }
                                i.second = 0
                                i.timer = null
                                // 超时判断
                                i.overTime = true
                                item.speedObj = i
                            } else if (i.addressName === '本次运行标志') {
                                if (i.addressValue === null || i.addressValue === '') {
                                    i.addressValue = '0'
                                }
                                item.curentOpenStopObj = i
                            } else if (i.addressName === '目标加肥量') {
                                if (i.addressValue === null || i.addressValue === '') {
                                    i.addressValue = '0'
                                }
                                i.second = 0
                                i.timer = null
                                // 超时判断
                                i.overTime = true
                                item.fertilizerOperationObj = i
                            } else if (i.addressName === '搅拌') {
                                if (i.addressValue === null || i.addressValue === '') {
                                    i.addressValue = '0'
                                }
                                // 开启或者关闭倒计时
                                i.second = 0
                                i.timer = null
                                // 超时判断
                                i.overTime = true
                                item.stirObj = i
                                item.stirObj.switchMixerMachineValue = i.addressValue
                            } else if (i.addressName === '加肥阀') {
                                if (i.addressValue === null || i.addressValue === '') {
                                    i.addressValue = '0'
                                }
                                // 开启或者关闭倒计时
                                i.second = 0
                                i.timer = null
                                // 超时判断
                                i.overTime = true
                                item.fertilizerAddObj = i
                                item.fertilizerAddObj.switchFertilizerAddValue = i.addressValue
                            } else if (i.addressName === '启停标志') {
                                if (i.addressValue === null || i.addressValue === '') {
                                    i.addressValue = '0'
                                }
                                // 开启或者关闭倒计时
                                i.second = 0
                                i.timer = null
                                // 超时判断
                                i.overTime = true
                                item.openStopObj = i
                                item.openStopObj.switchOpenStopValue = i.addressValue
                            }
                        })
                    }
                })
                this.globalLoading = false
            }, error => {
                this.globalLoading = false
            })
        },
        // 切换施肥机
        changeFertilizer() {
            this.queryParams.id = this.moduleId
            this.getList()
        },
        // 获取超时倒计时
        getTimer(rowData, index, switchValue, switchType) {
            if (switchType === '0') {
                rowData.openStopObj.timer = setInterval(() => {
                    if (rowData.openStopObj.second > 0) {
                        rowData.text = rowData.openStopObj.second + 's'
                        this.$set(this.list, index, rowData)
                        --rowData.openStopObj.second
                    } else {
                        clearInterval(rowData.openStopObj.timer)
                        if (rowData.openStopObj.overTime) {
                            this.$message.info('超时')
                            if (switchValue === '1') {
                                rowData.openStopObj.switchOpenStopValue = '0'
                            }
                            if (switchValue === '0') {
                                rowData.openStopObj.switchOpenStopValue = '1'
                            }
                        }
                        rowData.loading = false
                        rowData.text = ''
                        this.$set(this.list, index, rowData)
                    }
                }, 1000)
            }
            if (switchType === '1') {
                rowData.stirObj.timer = setInterval(() => {
                    if (rowData.stirObj.second > 0) {
                        rowData.text = rowData.stirObj.second + 's'
                        this.$set(this.list, index, rowData)
                        --rowData.stirObj.second
                    } else {
                        clearInterval(rowData.stirObj.timer)
                        if (rowData.stirObj.overTime) {
                            this.$message.info('超时')
                            if (switchValue === '1') {
                                rowData.stirObj.switchMixerMachineValue = '0'
                            }
                            if (switchValue === '0') {
                                rowData.stirObj.switchMixerMachineValue = '1'
                            }
                        }
                        rowData.loading = false
                        rowData.text = ''
                        this.$set(this.list, index, rowData)
                    }
                }, 1000)
            }
            if (switchType === '2') {
                rowData.fertilizerAddObj.timer = setInterval(() => {
                    if (rowData.fertilizerAddObj.second > 0) {
                        rowData.text = rowData.fertilizerAddObj.second + 's'
                        this.$set(this.list, index, rowData)
                        --rowData.fertilizerAddObj.second
                    } else {
                        clearInterval(rowData.fertilizerAddObj.timer)
                        if (rowData.fertilizerAddObj.overTime) {
                            this.$message.info('超时')
                            if (switchValue === '1') {
                                rowData.fertilizerAddObj.switchFertilizerAddValue = '0'
                            }
                            if (switchValue === '0') {
                                rowData.fertilizerAddObj.switchFertilizerAddValue = '1'
                            }
                        }
                        rowData.loading = false
                        rowData.text = ''
                        this.$set(this.list, index, rowData)
                    }
                }, 1000)
            }
            if (switchType === '3') {
                rowData.speedObj.timer = setInterval(() => {
                    if (rowData.speedObj.second > 0) {
                        rowData.text = rowData.speedObj.second + 's'
                        this.$set(this.list, index, rowData)
                        --rowData.speedObj.second
                    } else {
                        clearInterval(rowData.speedObj.timer)
                        if (rowData.speedObj.overTime) {
                            this.$message.info('超时')
                        }
                        rowData.loading = false
                        rowData.text = ''
                        this.$set(this.list, index, rowData)
                    }
                }, 1000)
            }
            if (switchType === '4') {
                rowData.fertilizerOperationObj.timer = setInterval(() => {
                    if (rowData.fertilizerOperationObj.second > 0) {
                        rowData.text = rowData.fertilizerOperationObj.second + 's'
                        this.$set(this.list, index, rowData)
                        --rowData.fertilizerOperationObj.second
                    } else {
                        clearInterval(rowData.fertilizerOperationObj.timer)
                        if (rowData.fertilizerOperationObj.overTime) {
                            this.$message.info('超时')
                        }
                        rowData.loading = false
                        rowData.text = ''
                        this.$set(this.list, index, rowData)
                    }
                }, 1000)
            }
        },
        // 读取、写入
        handleOperation(index, operationType, type) {
            this.$set(this.list, index, this.list[index])
            this.list[index].loading = true
            let data = this.list[index]
            if (type === 'speed') {
                this.list[index].speedObj.second = 30
                this.getTimer(data, index, operationType, '3')
                if (operationType === '0') {
                    this.read(index, data.speedObj.addressValue, type)
                }
                if (operationType === '1') {
                    this.write(index, data.speedObj.addressValue, type)
                }
            }
            if (type === 'fertilizerOperation') {
                this.list[index].fertilizerOperationObj.second = 30
                this.getTimer(data, index, operationType, '4')
                if (operationType === '0') {
                    this.read(index, data.fertilizerOperationObj.addressValue, type)
                }
                if (operationType === '1') {
                    this.write(index, data.fertilizerOperationObj.addressValue, type)
                }

            }
        },
        read(index, addressValue, type) {
            let rowData = this.list[index]
            let switchValue
            if (type === 'speed') {
                this.messageObj.id = rowData.speedObj.id
                switchValue = '3'
            }
            if (type === 'fertilizerOperation') {
                this.messageObj.id = rowData.fertilizerOperationObj.id
                switchValue = '4'
            }
            console.log(this.queryParams.id)
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: addressValue,
                before: '',
                key: 'read',
                switchType: switchValue
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '0'
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '0'
            this.messageObj.data = data
            this.send2Web(index, null, switchValue)
        },
        write(index, addressValue, type) {
            let rowData = this.list[index]
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: '',
                before: '',
                key: 'write',
                switchType: ''
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = addressValue
            this.messageObj.data = data
            let switchValue
            if (type === 'speed') {
                this.messageObj.id = rowData.speedObj.id
                switchValue = '3'
            }
            if (type === 'fertilizerOperation') {
                this.messageObj.id = rowData.fertilizerOperationObj.id
                switchValue = '4'
            }
            this.send2Web(index, null, switchValue)
        },
        // 搅拌
        handleMixerMachineStatus(index, mixerMachineValue) {
            this.$set(this.list, index, this.list[index])
            this.list[index].loading = true
            let data = this.list[index]
            this.list[index].stirObj.second = 10
            this.list[index].stirObj.switchMixerMachineValue = mixerMachineValue
            this.getTimer(data, index, mixerMachineValue, '1')
            if (mixerMachineValue === '0') {
                this.closeMixerMachine(index, '0')
            }
            if (mixerMachineValue === '1') {
                this.openMixerMachine(index, '1')
            }
        },
        closeMixerMachine(index, switchValue) {
            let rowData = this.list[index]
            let beforeValue = '1'
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: switchValue,
                before: beforeValue,
                key: 'closeMixerMachine',
                switchType: '1'
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.id = rowData.stirObj.id
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '0'
            this.messageObj.data = data
            this.send2Web(index, beforeValue, '1')
        },
        openMixerMachine(index, switchValue) {
            let rowData = this.list[index]
            let beforeValue = '0'
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: switchValue,
                before: beforeValue,
                key: 'openMixerMachine',
                switchType: '1'
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.id = rowData.stirObj.id
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '1'
            this.messageObj.data = data
            this.send2Web(index, beforeValue, '1')
        },
        // 加肥阀
        handleFertilizerAddStatus(index, fertilizerAddValue) {
            this.$set(this.list, index, this.list[index])
            this.list[index].loading = true
            let data = this.list[index]
            this.list[index].fertilizerAddObj.second = 10
            this.list[index].fertilizerAddObj.switchFertilizerAddValue = fertilizerAddValue
            this.getTimer(data, index, fertilizerAddValue, '2')
            if (fertilizerAddValue === '0') {
                this.closeFertilizerAdd(index, '0')
            }
            if (fertilizerAddValue === '1') {
                this.openFertilizerAdd(index, '1')
            }
        },
        closeFertilizerAdd(index, switchValue) {
            let rowData = this.list[index]
            let beforeValue = '1'
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: switchValue,
                before: beforeValue,
                key: 'closeFertilizerAdd',
                switchType: '2'
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.id = rowData.fertilizerAddObj.id
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '0'
            this.messageObj.data = data
            this.send2Web(index, beforeValue, '2')
        },
        openFertilizerAdd(index, switchValue) {
            let rowData = this.list[index]
            let beforeValue = '0'
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: switchValue,
                before: beforeValue,
                key: 'openFertilizerAdd',
                switchType: '2'
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.id = rowData.stirObj.id
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '1'
            this.messageObj.data = data
            this.send2Web(index, beforeValue, '2')
        },
        // 启停标志
        handleOpenStopStatus(index, openStopValue) {
            this.$set(this.list, index, this.list[index])
            this.list[index].loading = true
            let data = this.list[index]
            this.list[index].openStopObj.second = 10
            this.list[index].openStopObj.switchOpenStopValue = openStopValue
            this.getTimer(data, index, openStopValue, '0')
            if (openStopValue === '0') {
                this.closeOpenStop(index, '0')
            }
            if (openStopValue === '1') {
                this.openOpenStop(index, '1')
            }
        },
        closeOpenStop(index, switchValue) {
            let rowData = this.list[index]
            console.log('rowData', rowData)
            let beforeValue = '1'
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: switchValue,
                before: beforeValue,
                key: 'closeOpenStop',
                switchType: '0'
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.id = rowData.openStopObj.id
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '0'
            this.messageObj.data = data
            this.send2Web(index, beforeValue, '2')
        },
        openOpenStop(index, switchValue) {
            let rowData = this.list[index]
            let beforeValue = '0'
            let data = {
                moduleId: this.queryParams.id,
                index,
                value: switchValue,
                before: beforeValue,
                key: 'openOpenStop',
                switchType: '0'
            }
            this.messageObj.gatewayId = this.moduleInfo.gatewayId
            this.messageObj.operationType = '1'
            this.messageObj.id = rowData.openStopObj.id
            this.messageObj.webClientId = this.webClientId
            this.messageObj.writeValue = '1'
            this.messageObj.data = data
            this.send2Web(index, beforeValue, '2')
        },
        send2Web(index, beforeValue, switchType) {
            // switchType: '1':搅拌 ，'2':'加肥阀','0':'启停标志'
            let rowData = this.list[index]
            sendMessage(this.messageObj).then(response => {
                if (response.code === 200) {
                    // 成功后建立websocket
                    let obj = {
                        'webClientId': this.webClientId
                    }
                    this.sendMessage(obj)
                }
            }, error => {
                rowData.loading = false
                if (switchType === '0') {
                    rowData.openStopObj.switchOpenStopValue = beforeValue
                    rowData.openStopObj.second = 0
                    rowData.openStopObj.overTime = false
                }
                if (switchType === '1') {
                    rowData.stirObj.switchMixerMachineValue = beforeValue
                    rowData.stirObj.second = 0
                    rowData.stirObj.overTime = false
                }
                if (switchType === '2') {
                    rowData.fertilizerAddObj.switchFertilizerAddValue = beforeValue
                    rowData.fertilizerAddObj.second = 0
                    rowData.fertilizerAddObj.overTime = false
                }
                if (switchType === '3') {
                    rowData.speedObj.second = 0
                    rowData.speedObj.overTime = false
                }
                if (switchType === '4') {
                    rowData.fertilizerOperationObj.second = 0
                    rowData.fertilizerOperationObj.overTime = false
                }
                rowData.text = ''
                this.$set(this.list, index, rowData)
            })
        },
        // websocket 发送消息给服务器
        sendMessage(obj) {
            // this.$websocket.sendMsg(JSON.stringify(obj))
            // this.$websocket.sendMsg(obj)
            if (this.ws !== undefined && this.ws.readyState === 1) {
                console.log('已存在')
                // this.$websocket.sendMsg(obj)
            } else {
                this.localSocket(obj)
            }
        },
        localSocket(obj) {
            let that = this
            if ('WebSocket' in window) {
                console.log('您的浏览器支持 WebSocket')
                // console.log('that.ws', that.ws)
                if (that.ws !== undefined && that.ws.readyState === 1) {
                    console.log('存在连接')
                    return
                }
                that.ws = new WebSocket(that.$websocket.url)
                that.$websocket.setWs(that.ws)
                that.ws.onopen = function() {
                    console.log('开始连接')
                    // that.sendMessage(obj)
                    that.$websocket.sendMsg(obj)
                }
                // websocket 接收服务器消息
                that.ws.onmessage = function(result) {
                    console.log('收到websocket回复', result)
                    // console.log('回复data', result.data)
                    that.processData(result.data)
                }
                that.ws.onclose = function() {
                    // 防链接超时，（websocket在一定时间内没有数据交互，就会断开），关闭后重启
                    console.log('连接已关闭')
                    that.ws.close()
                    // setTimeout(() => {
                    //     that.localSocket()
                    // }, 2000)
                }
            } else {
                // 浏览器不支持 WebSocket
                console.log('您的浏览器不支持 WebSocket!')
            }
        },
        processData(json) {
            console.log('json', json)
            let data = {}
            try {
                data = JSON.parse(json)
            } catch (e) {
            }
            console.log('data', data)
            let webClientId = data['webClientId']
            let cause = data['cause']
            if (webClientId === undefined) {
                return
            }
            // console.log('回复的webClientId', webClientId)
            let text = null
            let key = data['key']
            let index = data['index']
            let beforeValue = data['before']
            let switchType = data['switchType']
            if ('openMixerMachine' === key || 'openFertilizerAdd' === key || 'openOpenStop' === key) {
                text = '开启成功'
            }
            if ('closeMixerMachine' === key || 'closeFertilizerAdd' === key || 'closeOpenStop' === key) {
                text = '关闭成功'
            }
            if ('read' === key) {
                text = '读取成功'
            }
            if ('write' === key) {
                text = '写入成功'
            }
            // let id = data['id']
            if (webClientId === this.webClientId) {
                // console.log('id', id)
                if (cause !== undefined) {
                    this.$message.error(cause)
                    // this.list[index].loopValue = beforeValue
                    if (switchType === '0') {
                        this.list[index].openStopObj.switchOpenStopValue = beforeValue
                        this.list[index].openStopObj.addressValue = beforeValue
                        this.list[index].openStopObj.overTime = false
                        this.list[index].openStopObj.second = 0
                    }
                    if (switchType === '1') {
                        this.list[index].stirObj.switchMixerMachineValue = beforeValue
                        this.list[index].stirObj.addressValue = beforeValue
                        this.list[index].stirObj.overTime = false
                        this.list[index].stirObj.second = 0
                    }
                    if (switchType === '2') {
                        this.list[index].fertilizerAddObj.switchFertilizerAddValue = beforeValue
                        this.list[index].fertilizerAddObj.addressValue = beforeValue
                        this.list[index].fertilizerAddObj.overTime = false
                        this.list[index].fertilizerAddObj.second = 0
                    }
                    if (switchType === '3') {
                        this.list[index].speedObj.overTime = false
                        this.list[index].speedObj.second = 0
                    }
                    this.list[index].loading = false
                    this.$set(this.list, index, this.list[index])
                    return
                }
                if (switchType === '0') {
                    this.list[index].openStopObj.overTime = false
                    this.list[index].openStopObj.second = 0
                    this.list[index].openStopObj.addressValue = data['value']
                }
                if (switchType === '1') {
                    this.list[index].stirObj.overTime = false
                    this.list[index].stirObj.second = 0
                    this.list[index].stirObj.addressValue = data['value']
                }
                if (switchType === '2') {
                    this.list[index].fertilizerAddObj.overTime = false
                    this.list[index].fertilizerAddObj.second = 0
                    this.list[index].fertilizerAddObj.addressValue = data['value']
                }
                if (switchType === '3') {
                    this.list[index].speedObj.overTime = false
                    this.list[index].speedObj.second = 0
                    if (key === 'read') {
                        this.list[index].speedObj.addressValue = data['value']
                    }
                    if (key === 'write') {
                        this.list[index].speedObj.addressValue = data['writeValue']
                    }
                }
                if (switchType === '4') {
                    this.list[index].fertilizerOperationObj.overTime = false
                    this.list[index].fertilizerOperationObj.second = 0
                    if (key === 'read') {
                        this.list[index].fertilizerOperationObj.addressValue = data['value']
                    }
                    if (key === 'write') {
                        this.list[index].fertilizerOperationObj.addressValue = data['writeValue']
                    }
                }
                this.list[index].loading = false
                this.$message.success(text)
                this.$set(this.list, index, this.list[index])
            }
        }
    }
}
</script>

<style scoped>
.addressValueClass {
    color: #606266;
    font-weight: 700
}
</style>
